<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>能耗看板</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="title">
      <span class="company">{{comapnyName}}</span>
      <div class="btns">
        <el-button size="small" @click="toBack">回到首页</el-button>
      </div>
    </div>
    <div class="wastage-board-content">
      <template v-for="(wastageList,rowIndex) in pageWastageList">
        <div :key="`wastageRow_${rowIndex}`" :class="{'is-last-line':(rowIndex+1)%rowNum===0}" :style="{height:`calc(${100/rowNum}% - 3px`}">
          <template v-for="(wastage,index) in wastageList">
            <wastage-item v-if="wastage!==null" :key="wastage.id" :wastage="wastage" :is-show="getHasShow(rowIndex)"
              :chart-start-date="showDateList[showStartDateIndex]"></wastage-item>
            <div v-else :key="'wastage_'+index" class="wastage-item"></div>
          </template>
        </div>
      </template>
    </div>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20190223085008echarts.min.4.2.1-rc.1.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/wastageItem.css"
  ], [
    "/vueSystem/models/baseModel.js"
  ]);
</script>
<script src="./models/wastageModel.js"></script>
<script src="./wastageItem.js"></script>
<script>
  var app = new Vue({
    el: '#app',

    watch: {
      currentRowIndex: function (newVal, oldVal) {
        var $content = $(this.$el).find('.wastage-board-content');
        var scrollTop = $content.scrollTop();
        var top = $content.find(`>div:eq(${newVal})`).position().top;
        scrollTop += top;

        if (this.nonAnimate) {
          this.nonAnimate = false;
          $content.scrollTop(scrollTop);
          return;
        }

        var self = this;
        $content.animate({
          scrollTop: scrollTop
        }, 1000, function () {
          if (newVal === self.totalRow - self.rowNum) {
            self.currentRowIndex = 0;
            self.nonAnimate = true;
          }
        });
      }
    },

    data: function () {
      return {
        loading: false,
        basePath: SysUtil.getBasePath(),
        comapnyName: '',
        wastageList: [],
        pageWastageList: [],
        rowNum: 2,
        colNum: 3,
        currentRowIndex: 0,
        showDateList: this.getShowDateList(),
        showStartDateIndex: 0,
        totalRow: 0,
        scrollTimeout: null,
        nonAnimate: false
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setComapnyName(),
        this.setWastageList(true)
      ]).then(function () {
        self.toPageWastageList();
        self.loading = false;
        self.boardRuning();
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      getShowDateList: function () {
        var showDateList = [];
        var dateMoment = moment().startOf('month');
        var maxMoment = moment().subtract(9, 'day');
        while (maxMoment.isSameOrAfter(dateMoment)) {
          showDateList.push(dateMoment.format('YYYY-MM-DD'));
          dateMoment.add(1, 'day');
        }
        return showDateList;
      },

      setComapnyName: function () {
        var self = this;
        return ajaxRequest('user/getUserName').then(function (user) {
          self.comapnyName = user.company;
          return user;
        }).catch(function () {
          return null;
        });
      },

      setWastageList: function (hasAlert) {
        var self = this;
        if (hasAlert === undefined) {
          hasAlert = false;
        }
        return ajaxRequest('energy/getWorkEnergyConsumptionData', {}, true, hasAlert).then(function (wastageList) {
          var wastages = [];
          for (var i = 0; i < wastageList.length; i++) {
            var wastage = wastageList[i];
            wastage = new WastageModel(wastage);
            wastages.push(wastage);
          }
          self.wastageList = wastages;
          if (self.currentRowIndex !== 0) {
            self.currentRowIndex = 0;
            self.nonAnimate = true;
          }
          return wastages;
        }).catch(function () {
          return [];
        });
      },

      toPageWastageList: function () {
        var wastageList = this.wastageList;
        var pageWastageList = [];
        var colNum = this.colNum;
        var rowNum = this.rowNum;
        var totalRow = wastageList.length / colNum;
        totalRow = _.round(totalRow, 1);
        totalRow = Math.ceil(totalRow);
        totalRow = totalRow < rowNum ? rowNum : totalRow;
        for (var i = 0; i < totalRow; i++) {
          pageWastageList.push([]);
        }

        var lastRow = 0;
        for (var i = 0; i < wastageList.length; i++) {
          var wastage = wastageList[i];
          var rowIndex = i / colNum;
          rowIndex = Math.floor(rowIndex);
          pageWastageList[rowIndex].push(wastage);
          if (i === wastageList.length - 1) {
            lastRow = rowIndex;
          }
        }

        var lastWastage = pageWastageList[lastRow];
        if (lastWastage.length > 0) {
          for (var i = lastWastage.length; i < colNum; i++) {
            lastWastage.push(null);
          }
        }

        if (totalRow > rowNum) {
          var num = totalRow % rowNum;
          if (num !== 0) {
            for (var i = 0; i < num; i++) {
              var array = [];
              for (var i = 0; i < colNum; i++) {
                array.push(null)
              }
              pageWastageList.push(array);
            }
          }
          for (var i = 0; i < rowNum; i++) {
            pageWastageList.push(pageWastageList[i]);
          }
        }
        this.totalRow = pageWastageList.length;
        this.pageWastageList = pageWastageList;
      },

      getHasShow: function (rowIndex) {
        var rowNum = this.rowNum;
        var totalRow = this.totalRow;
        if (rowNum >= totalRow) {
          return true;
        }

        var currentRowIndex = this.currentRowIndex;
        if (rowIndex >= currentRowIndex && rowIndex <= currentRowIndex + rowNum - 1) {
          return true;
        }
        return false;
      },

      toBack: function () {
        var basePath = this.basePath;
        location.href = basePath + "/datav/index.html?autoLogin=autoLogin";
      },

      boardRuning: function () {
        this.scrollRuning();
        this.setWastageDataRuning();
        this.resetWastageListRuning();
        this.resetShowDateListRuning();
      },

      scrollRuning: function () {
        var self = this;

        setTimeout(function () {
          self.toNextPage();
          self.scrollRuning();
        }, 10500);
      },

      toNextPage: function () {
        var currentRowIndex = this.currentRowIndex;
        var totalRow = this.totalRow;
        var rowNum = this.rowNum;
        if (totalRow <= rowNum) {
          return;
        }

        this.currentRowIndex = (currentRowIndex + this.rowNum) % totalRow;
      },

      setWastageDataRuning: function () {
        var self = this;
        setTimeout(function () {
          var showStartDateIndex = self.showStartDateIndex;
          var showDateList = self.showDateList;
          if (showDateList.length === 0) {
            self.showStartDateIndex = 0;
            return;
          }
          var index = (showStartDateIndex + 1) % showDateList.length;
          self.showStartDateIndex = index;
          self.setWastageDataRuning();
        }, 5000);
      },

      resetWastageListRuning: function () {
        var self = this;
        setTimeout(function () {
          self.setWastageList().then(function () {
            self.toPageWastageList();
            self.resetWastageListRuning();
          });
        }, 10 * 60 * 1000);
      },

      resetShowDateListRuning: function () {
        var tomorrowMoment = moment().add(1, 'day').startOf('day').set({
          hour:0,
          second:1
        });
        var delayTime = tomorrowMoment.diff(moment());
        var self = this;
        setTimeout(function () {
          var showDateList = self.getShowDateList();
          self.showDateList = showDateList;
          var currentRowIndex = self.currentRowIndex;
          if (currentRowIndex >= showDateList.length) {
            self.currentRowIndex = 0;
          }
          self.resetShowDateListRuning();
        }, delayTime);
      }
    },

    components: {
      WastageItem: WastageItem
    }
  });
</script>
<style>
  #app {
    background: #0E2A43;
  }

  .title {
    height: 43px;
    text-align: center;
    background-size: 176px 40px;
    background-repeat: no-repeat;
    background-color: #000;
    position: relative;
  }

  .title .company {
    color: #ffffff;
    font-size: 20px;
    line-height: 43px;
  }

  .title .btns {
    position: absolute;
    right: 10px;
    top: 0;
    padding-top: 5px;
  }

  .wastage-board-content {
    height: calc(100% - 53px);
    overflow: hidden;
    margin: 5px;
    position: relative;
  }

  .wastage-board-content>div {
    margin-bottom: 6px;
    display: flex;
  }

  .wastage-board-content>div.is-last-line {
    margin-bottom: 0;
  }

  .wastage-board-content .wastage-item {
    flex: 1;
    margin-right: 5px;
  }

  .wastage-board-content .wastage-item:last-child {
    margin-right: 0;
  }
</style>

</html>